<template>
	<view class="setANewPasswordContent">
		<commonNavBar title="食品安全移动监管"   ></commonNavBar>   
		<view class="centre">
			<view class="step">
				<view v-for="(tabs,index) in stepList" :key="index">
					<view :class="{'active':tabs.active}">
						{{ tabs.step }}
					</view>
				</view> 
			</view>
			<view class="box"   id="centre"  :style="{height:  pageHeight+'px',padding:'0 39rpx' ,background: '#fff','border-radius': '20rpx',margin: '21rpx auto 0'}">
				<view class="form-group">
					<input class="password" v-model="password" :type="showPassword ? 'text' : 'password'"
						:class="{'big': !showPassword}" placeholder="请设置6到12位数密码" />
					<image :src="showPassword ? eyeOpenIcon : eyeCloseIcon" @click="togglePasswordVisibility" />
				</view>
				<view class="form-group">
					<input class="password" v-model="repeatPassword" :type="showPassword ? 'text' : 'password'"
						:class="{'big': !showPassword}" placeholder="请再次输入新的登密码" />
				</view>
				<view class="btn-group">
					<button @click="submitTo">提交</button>
					<button style="background: #ffffff;color: #000;border: 1px solid #e2e2e2;" @click="cancel">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import SM4Util from '@/static/js/sm4util.js';
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar
		},
		data() {
			return { 
				stepList: [{
					// step: '1.验证手机号码',
					step: '1.旧密码',
					active: false
				}, {
					step: '2.设置新密码',
					active: true
				}],
				eyeOpenIcon: '/static/img/on.png',
				eyeCloseIcon: '/static/img/off.png',
				password: '',
				repeatPassword: '',
				pageHeight: 0,
				showPassword: false
			}
		},
		onLoad() {
			const  that = this;
			const query = uni.createSelectorQuery().in(this);
			setTimeout(function(){
				query.select("#centre").fields({rect:true},(data) => {
				    console.log("得到布局位置信息" + JSON.stringify(data)); 
					that.pageHeight = uni.getSystemInfoSync().windowHeight - data.top;
				  }).exec();  
			},500)
		},
		created() {

		},
		mounted() {

		},
		methods: {
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			async submitTo() {
				if (this.password.trim() == '' || this.repeatPassword.trim() == '') {
					uni.showModal({
						title: '提示',
						content: '密码不能为空',
						showCancel: false
					});
					return;
				}
				//密码规则：大小写、数字、特殊
				if (!this.validatePassword(this.password)) {
					uni.showModal({
						title: '提示',
						content: '密码需要8至30位，至少一个大写英文字母、一个小写英文字母、一个数字和一个特殊字符',
						showCancel: false
					});
					return;
				}
				if (this.password != this.repeatPassword) {
					uni.showModal({
						title: '提示',
						content: '俩次密码输入不一致',
						showCancel: false
					});
					return;

				}
				let sm4 = new SM4Util('62D95F5BA8E44064231018DF8A9EE027')
				const formData = {
					'password': sm4.encryptData_ECB(this.repeatPassword)
				}
				try {
					const res = await uni.$api.updatePassWord(formData);
					console.log('res', res)
					if (res.data.code === 0) {
						uni.removeStorageSync("resetPassword")
						uni.showToast({
							title: '修改密码成功',
							icon: 'success',
							image: '/static/img/success.png',
							duration: 2000,
						});
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/land/land'
							});
						}, 2000);
					}
				} catch (error) {
					console.error(error)
				}


			},
			validatePassword(password) {
				// At least one upper case English letter, one lower case English letter, one digit and one special character
				// Password length between 8 to 64
				const regex = new RegExp('^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,30}$');
				//const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,64}$/;
				return regex.test(password);
			}
			// 验证手机
			// submitTo() {
			// const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{12,}$/;
			// if(passwordRegex.test(this.password) || passwordRegex.test(this.repeatPassword)) {
			// 	if(this.password != '' && this.repeatPassword != '') {
			// 		if(this.password === this.repeatPassword) {
			// 			uni.showToast({
			// 				title: '找回密码成功',
			// 				icon: 'success',
			// 				image: '/static/img/success.png',
			// 				duration: 2000,
			// 			});
			// 			setTimeout(function () {
			// 			    uni.redirectTo({
			// 			    	url: '/pages/land/land'
			// 			    });
			// 			}, 2000);
			// 		}else {
			// 			uni.showToast({
			// 				title: '俩次密码输入不一致',
			// 				icon: 'none',
			// 				image: '',
			// 				duration: 2000,
			// 			});
			// 		}
			// 	}else {
			// 		uni.showToast({
			// 			title: '新密码不能为空',
			// 			icon: 'none',
			// 			image: '',
			// 			duration: 2000,
			// 		});
			// 	}
			// }else {
			// 	uni.showToast({
			// 		title: '新密码格式不正确',
			// 		icon: 'none',
			// 		image: '',
			// 		duration: 2000,
			// 	});
			// }
			// }
			,
			cancel(){
				uni.showModal({
					content:'确定要取消修改密码么?',
					success:function(res){
						if(res.confirm) {
							uni.removeStorageSync(uni.$Call.token)
							uni.removeStorageSync(uni.$Call.loginData)
							uni.removeStorageSync("resetPassword");
							uni.reLaunch({
								url: '/pages/land/land'
							})
						}
					}
				})
			}
		},
		watch: {

		},
	}
</script>

<style lang="scss">
	.setANewPasswordContent { 

		.centre {
			background: #F5F7FE;
			padding: 20rpx 3% 0 3%;
			
			.step {
				display: flex;
				justify-content: space-around;

				view {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;

					&.active {
						color: #004596;
					}
				}
			}

			.box {
				background: #fff; 

				.form-group {
					border-bottom: 1rpx solid #B5B5B5;
					position: relative;
					height: 100rpx;
					// line-height: 100rpx;
					display: flex;

					input {
						height: 100rpx;
					}

					.password {
						width: 100%;
						border: none;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						outline: none;
					}

					.password.big {
						font-size: 30rpx;
						color: #666666;
					}

					.password::placeholder {
						color: #BDBDBD;
						font-size: 30rpx;
					}

					image {
						width: 36rpx;
						height: 22rpx;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0%, -50%);
					}
				}
				
				.btn-group{
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					
					
					>button {
						margin: 62rpx auto 0;
						height: 94rpx;
						width: 300rpx;
						line-height: 94rpx;
						text-align: center;
						border-radius: 47rpx;
						background: #004596;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						color: #fff;
						font-weight: 500;
						border: none;
					
						&::after {
							display: none;
						}
					
						&.active {
							background: #004596;
							color: #fff;
						}
					}
				}

			}
		}
	}
</style>